<template>
	<div>
		<dv-decoration-11 style="height:50px; width:40%; margin:0 auto;">各班级视力不良率趋势</dv-decoration-11>
		<dv-border-box-8 style="width:100%;height:100%;">
			<el-row type="flex" class="row-bg" style="margin: 20px; height: 300px;">
				<el-col :span="24" style="margin: 10px 0;padding:20px 0;">
					<dv-scroll-board :config="data1Dam" style="color:#01c4f7;text-align: center;" />
					</dv-scroll-board>
				</el-col>
			</el-row>
		</dv-border-box-8>
		<dv-decoration-11 style="height:50px; width:40%; margin:0 auto;">全校视力构成比</dv-decoration-11>
		<dv-border-box-8 style="width:100%;height:100%;">
			<div class="data4-box" style="width:92%;height:200px;top:6%;position: relative;margin: 0px auto;">
		    <dv-charts :option="data4" />
		  </div>
		</dv-border-box-8>
	</div>
</template>
<script>
export default {
	name: 'Left',
	components: {

	},
	props: {
		rows: {
			default: {}
		}
	},
	data(){
		return {
			data1Dam: {},
			dataheader: ["班级","人数","不良率"],
			data4: {}
		}
	},
	mounted(){
		this.$watch('rows', () => {
			this.data4 = {
        series: [
          {
            type: 'pie',
            data: [
              { name: '轻度视力不良', value: this.rows.allNum49 },
              { name: '中度视力不良', value: this.rows.allNum46 },
              { name: '高度视力不良', value: this.rows.allNum45 },
              { name: '视力正常', value: this.rows.allNum5 }
            ],
            radius: ['30%', '40%'],
            insideLabel: {
              show: false
            },
            outsideLabel: {
              labelLineEndLength: 10,
              formatter: '{percent}%\n{name}',
              style: {
                fontSize: 14,
                fill: '#fff'
              }
            }
          }
        ],
        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b']
      }
      this.data1Dam = {
	      data: this.resetData(this.rows.departmentBadResult), // 表数据
	      header: this.dataheader, // 表头数据
	      rowNum: 6, // 表行数
	      headerBGC: '#021950', // 表头背景色
	      oddRowBGC: '#0b1547', // 奇数行背景色
	      evenRowBGC: '#000a3b', // 偶数行背景色
	      waitTime: 2000, // 轮播时间间隔(ms)
	      align: 'center'
	    }
    })
	},
	methods: {
		resetData(list){
			console.log(list)
			var data = []
			for (var i in list) {
				data.push([list[i]['name'], list[i]['all'], parseInt((list[i]['num']/list[i]['all'])*100) + '%'])
			}
			return data
		}
	}
}
</script>